<script setup>
import { nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import { getLikeRecordByUserIdAndOpTypeService } from '@/api/likeRecord';
import { useRouter, useRoute } from 'vue-router'
import { getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance(); // 获取全局注册的组件

const router = useRouter()
const route = useRoute()

const formData = ref({
  userId: null,
  opType: 0, // 操作类型 0:文章点赞 1:评论点赞
  pageNum: 1, // 页数
  pageSize: 6, // 每页条数
})
// 获取用户点赞记录列表
const likeRecordList = ref([])
const likeRecordListTotal = ref(0)
const getLikeRecordList = async () => {
  let res = await getLikeRecordByUserIdAndOpTypeService(formData.value)
  console.log("获取用户点赞记录列表: ", res.data)
  likeRecordList.value = res.data.likeRecordList
  likeRecordListTotal.value = res.data.total
}

// 搜索条件切换
const handleTabChange = (tab) => {
  formData.value.opType = tab.props.name
  getLikeRecordList()
}

// 页数变化
const handleCurrentChange = (num) => {
  formData.value.pageNum = num
  getLikeRecordList()
}

onMounted(() => {
  formData.value.userId = route.params.userId
  getLikeRecordList()
})

</script>

<template>
  <div class="user-like-record">
    <!-- 头部搜索条件 -->
    <div class="list-header">
      <el-tabs v-model="formData.opType" class="demo-tabs" @tab-click="handleTabChange">
        <el-tab-pane label="文章点赞" :name="0"></el-tab-pane>
        <!-- <el-tab-pane label="评论点赞" :name="1"></el-tab-pane> -->
      </el-tabs>
      <div class="list-total">点赞总数：{{ likeRecordListTotal }}</div>
    </div>
    <!-- 若无点赞记录 -->
    <el-empty v-if="likeRecordListTotal == 0" :image-size="100" description="目前暂无点赞记录"></el-empty>
    <!-- 点赞记录列表 -->
    <div v-if="likeRecordListTotal != 0" class="user-like-record-list">
      <div class="user-like-record-list-item" v-for="(item, index) in likeRecordList">
        <div class="msg-item-avatar">
          <img v-if="item.avatar != null" :src="item.avatar" alt="">
          <img v-else src="../../assets/default_avatar.jpg" alt="">
        </div>
        <div class="msg-item-content">
          <div class="msg-item-top">
            <span style="font-size: 14px;">
              {{ item.nickname }}
              <span style="margin: 0 5px;font-size: 14px;color: #9999aa;">点赞了</span>
              <span style="font-weight: 600;color: green;"> {{ item.title }}</span>
            </span>
            <span style="font-size: 14px;color: #9999aa;">
              <div style="text-align: right;">删除</div>
              <div>{{ item.createTime }}</div>
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页区域 -->
    <div v-if="likeRecordListTotal != 0" class="pagination">
      <el-pagination @current-change="handleCurrentChange" :page-size="Number(formData.pageSize)"
        :total="likeRecordListTotal" background layout="prev, pager, next" />
    </div>
  </div>

</template>

<style scoped>
/* 头部搜索条件 */
.user-like-record .list-header {
  border-bottom: 1px solid #e4e6eb;
  padding: 5px 20px 0px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-like-record .list-total {
  color: #8a919f;
}

/* 评论列表 */
.user-like-record .user-like-record-list .user-like-record-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dotted #ddd;
  cursor: pointer;
  padding-left: 20px;
  padding-right: 20px;
}

.user-like-record .user-like-record-list .user-like-record-list-item:hover {
  background-color: #f7f8fa;
}

.user-like-record .user-like-record-list .user-like-record-list-item {
  display: flex;
}

.user-like-record .user-like-record-list .user-like-record-list-item .msg-item-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.user-like-record .user-like-record-list .user-like-record-list-item .msg-item-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.user-like-record .user-like-record-list .user-like-record-list-item .msg-item-content {
  flex: 1;
  margin-left: 10px;
}

.user-like-record .user-like-record-list .user-like-record-list-item .msg-item-content .msg-item-top {
  display: flex;
  justify-content: space-between;
}

/* hover效果 */
.user-like-record .user-like-record-list .user-like-record-list-item .user-like-record-list-item-l .user-like-record-list-item-header-title:hover,
.user-like-record .user-like-record-list .user-like-record-list-item .user-like-record-list-item-l .user-like-record-list-item-footer-r .board-name:hover {
  color: green;
}

/* 分页区域 */
.user-like-record .pagination {
  padding: 10px;
}
</style>